import type { PropType } from "vue";
import type { PageType } from "../types";
import { computed, defineComponent, inject } from "vue";
import { useLayoutStore } from "@/stores/layout";
import { SYMBOL_FETCH_DATA } from "../types";

interface Props {
    page: PageType;
}

export default defineComponent((props: Props) => {
    const fetchData = inject(SYMBOL_FETCH_DATA)!;

    const { page } = props;

    /** 获取设备类型 */
    const device = computed(() => useLayoutStore().device);

    /** 分页配置 */
    const pageConfig = computed(() => {
        if (device.value === "mobile") {
            return {
                layout: "pager",
                pagerCount: 5,
            };
        }
        return {
            layout: "total, jumper, prev, pager, next, sizes",
            pagerCount: 7,
        };
    });

    /** 分页页数改变 */
    const handleSizeChange = (val: number): void => {
        page.pageSize = val;
        page.pageNum = 1;
        fetchData();
    };

    /** 分页当前页改变 */
    const handleCurrentChange = (val: number): void => {
        page.pageNum = val;
        fetchData();
    };

    return () => (
        <el-pagination
            background
            size="small"
            layout={pageConfig.value.layout}
            pagerCount={pageConfig.value.pagerCount}
            total={page.total}
            pageSizes={[10, 20, 50]}
            pageSize={page.pageSize}
            currentPage={page.pageNum}
            onSizeChange={handleSizeChange}
            onCurrentChange={handleCurrentChange}
        />
    );
}, {
    name: "Pagination",
    props: {
        page: {
            type: Object as PropType<PageType>,
            required: true,
        },
    },
});
